<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap {
            width: 400px;
            transition: all .4s;
            overflow: hidden;
            display: grid;
            grid-template-rows: 0fr;
            background: #908aef;
            min-height: 40px;
        }

        .wrap-fr {
            grid-template-rows: 1fr;
        }

        .last {
            overflow: hidden;
        }

        .box3 {
            height: 200px;
        }
    </style>
</head>
<body>
<div>
    <button id="btn">展开</button>
    <div class="wrap">
        <section class="last">
            <div class="box3">3</div>
            <div  class="box4">4</div>
        </section>
    </div>
</div>
<script>
  // grid收合动画grid容器里面只能有一个子项，另外这个有兼容问题，目前在谷歌86上是不支持的,但是效果不错
    const btn = document.querySelector("#btn");
    const wrap = document.querySelector(".wrap");
    let isExpand = false;

    btn.onclick = function () {
      wrap.classList.toggle("wrap-fr")
      isExpand = !isExpand;

      btn.innerHTML = isExpand ? '收合' : '展开'
    }
</script>
</body>
</html>